<template>
  <div class="app-container">
    <div>
      机号：
      <el-input
        v-model="machine_number"
        placeholder="admin"
        style="width:240px"/>
      <label v-html="allMachinePass"/>
      全部机：
      <el-checkbox
        v-model="ab_all_machine"/>
    </div>
    <br/>

    <div>
      时间：
      <el-date-picker
        v-model="startTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      -
      <el-date-picker
        v-model="endTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <label v-html="onePass"></label>
      <el-button type="primary" @click="getTotalCheck">搜索</el-button>
      <el-button type="primary">打印</el-button>
      <el-button type="primary" @click="dialogTableVisible = true">修改提成</el-button>
    </div>
    <br/>

    <el-dialog title="点击修改提成" :visible.sync="dialogTableVisible">
      <el-table :data="machines" @row-click="showModifyCommissionDialog">
        <el-table-column property="machine_number" label="机器号" min-width="50%"></el-table-column>
        <el-table-column property="commission" label="提成" min-width="50%"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="修改提成" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="机器号">
          <el-input v-model="form.machine_number" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="提成">
          <el-input v-model="form.commission" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyCommission">确 定</el-button>
      </div>
    </el-dialog>

    <el-table
      border
      :header-cell-style="{'color':'#2E53E9','font-size':'1.2em','font-weight':'900','background':'#F0FFF0'}"
      :data="datas.orders"
      style="width: 100%">
      <el-table-column sortable
                       prop="machine_number"
                       label="机号"
                       min-width="10%"/>
      <el-table-column sortable
                       prop="date"
                       label="日期"
                       min-width="40%"/>
      <el-table-column sortable
                       prop="sub_total_bet_money"
                       label="销售额"
                       min-width="10%"/>
      <el-table-column sortable
                       prop="commission"
                       label="提成"
                       min-width="10%"/>
      <el-table-column sortable
                       prop="prizes"
                       label="中奖金额"
                       min-width="10%"/>
      <el-table-column sortable
                       prop="redemption_amount"
                       label="兑奖金额"
                       min-width="10%"/>
      <el-table-column sortable
                       prop=""
                       label="结算"
                       min-width="10%">
        <template slot-scope="scope">
          {{ getTotal(scope.$index, datas.orders) }}
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import axios from "axios";
  import {getEndYMD, getStartYMD} from "@/util/DTUtil";
  import G from "@/components/G";

  export default {
    data() {
      return {
        onePass: '&emsp;',

        allMachinePass: '&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;',

        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        startTime: '',
        endTime: '',
        machine_number: '',
        ab_all_machine: false,
        datas: [],
        //修改提成
        machines: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        formMachineNumber: '',
        form: {
          machine_number: '',
          commission: ''
        },
      }
    },
    methods: {
      getMachines() {
        axios.post(G.host + 'getMachines', '').then(res => {
          this.machines = res.data.machineList
        })
      },

      checkTime(i) {
        if (i < 10) {
          i = "0" + i
        }
        return i;
      },
      getTotalCheck() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        let startDate = new Date(this.startTime);
        let requestStartTime = startDate.getFullYear() + '-' + this.checkTime(startDate.getMonth() + 1) + '-' + this.checkTime(startDate.getDate());
        let endDate = new Date(this.endTime);
        let requestEndTime = endDate.getFullYear() + '-' + this.checkTime(endDate.getMonth() + 1) + '-' + this.checkTime(endDate.getDate());

        if (this.ab_all_machine) {
          this.machine_number = ''
        }

        let param = '&machine_number=' + this.machine_number
          + '&startTime=' + requestStartTime
          + '&endTime=' + requestEndTime
        axios.post(G.host + 'getOrdersByDateRange', param).then(res => {
          this.datas = res.data
          loading.close()
        })
      },
      //表格行点击事件
      showModifyCommissionDialog(row, event, column) {
        this.dialogFormVisible = true
        this.form.machine_number = row.machine_number
        this.form.commission = row.commission
      },
      modifyCommission() {
        this.dialogFormVisible = false
        let param = '&machine_number=' + this.form.machine_number
          + '&commission=' + this.form.commission
        axios.post(G.host + 'updateMachineCommission', param).then(res => {
          //刷新数据
          this.getMachines()
          this.getTotalCheck()
        })
      },
      getTotal(index, dataList) {
        let commissionValue = (dataList[index].sub_total_bet_money * dataList[index].commission) / 100
        return (dataList[index].sub_total_bet_money - commissionValue - dataList[index].prizes)
      }
    },
    mounted() {
      this.getMachines()
      this.getTotalCheck()
      //初始化当前日期
      this.startTime = getStartYMD()
      this.endTime = getEndYMD()
    }
  }
</script>
<style lang="scss" scoped>

</style>
